<template>
	<view>
		<cu-custom :bgColor="globalData.bgColor" :isBack="true">
			<block slot="content"><text class="text-darkgrey">商品详情</text></block>
		</cu-custom>
		<view>
			<!-- 商品 -->
			<swiper style="height: 400px;" class="screen-swiper square-dot banner" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
			 duration="500" indicator-color="#cccccc" indicator-active-color="#ffffff">
				<swiper-item v-for="(item,index) in data.picUrls" :key="index" :class="cardCur==index?'cur':''">
					<image :src=" item" mode="aspectFill" ></image>
				</swiper-item>
			</swiper>
			<view class="case bg-white  solid-top">
				<view class="cu-list goods-list">
					<view class="cu-item bg-white solid-bottom" >
						<view class="flex justify-between padding-top padding-lr">
						    <view class="align-center text-darkgrey text-df">
								<shopinfo class="margin-left-xs" :shopId="data.shopId" ></shopinfo>
						    </view>
						    <view class="text-xs cu-tag light round" :class="data.shelf==1?'bg-cyan':'bg-red'">{{data.shelf==1?'已上架':'已下架'}}</view>
						</view>
						<view class="cu-list menu-avatar flex justify-between padding align-center">
						    <view class="cu-avatar img-box bg-white" :style="{'background-image':data.picUrls?'url('+data.picUrls[0]+')':''}"></view>
						    <view class="content flex-sub padding-lr text-sm">
						        <view class="text-darkgrey text-bold text-lg text-to-long margin-top-xs">{{data.name}}</view>
								<view class="text-darkgrey text-df text-to-long margin-top-xs">{{data.sellPoint}}</view>
						        <view class="text-darkgrey text-df justify-between margin-top-xs">销量：{{data.saleNum}}</view>
						        <view class=" margin-top-xs">
						            <text class="text-red text-price text-xl text-bold">{{data.priceDown}}</text>
						            <text class="text-red text-xl text-bold" v-show="data.priceUp&&data.priceDown!=data.priceUp"> {{' - '}} <text class="text-red text-price text-xl text-bold"> {{data.priceUp}}</text></text>
						        </view>
						    </view>
						</view>
						<view class="flex justify-end padding-bottom padding-right">
						    <button v-if="globalData.permissions['mall:goodsspu:edit']" @click="changeShelf(data)" class="cu-btn round button-bg"  :class="data.shelf==1?'bg-red':'bg-green'">{{data.shelf==1?'下架':'上架'}}</button>
						</view>
					</view>
				</view>
			</view>
			<view class="case bg-white  margin-top-xs padding">
				<view class="text-darkgrey  margin-top-xs">虚拟销量：{{data.saleNum}}</view>
				<!-- <view class="text-purple-grey  margin-top-xs">类目ID：{{data.categoryFirst}}</view> -->
				<view class="text-darkgrey  margin-top-xs">规格类型：{{data.specType==0?'统一规格':'多规格'}}</view>
				<view class="text-darkgrey  margin-top-xs">积分赠送：{{data.pointsGiveSwitch==0?'关闭':'开启'}}</view>
				<view class="text-darkgrey  margin-top-xs">积分抵扣：{{data.pointsDeductSwitch==0?'关闭':'开启'}}</view>
				<view class="text-darkgrey  margin-top-xs">卖点：{{data.sellPoint?data.sellPoint:'未填写'}}</view>
				<view class="text-darkgrey  margin-top-xs">创建时间：{{data.createTime}}</view>
				<view class="text-darkgrey  margin-top-xs">更新时间：{{data.updateTime}}</view>
			</view>
			<view class="case bg-white margin-top-xs padding-top padding-left-xs padding-bottom-sm">
				<text class="text-darkgrey text-df  cuIcon-titles">
					商品介绍
				</text>
			</view>
			<view class="description-class" v-html="data.description">
			</view>
		</view>
		<view class="text-center text-gray padding">已经到底了</view>
	</view>
</template>

<script>
	const app = getApp();
    import {getPage, getObj, addObj, putObj, delObj, putObjShelf} from '@/api/mall/goodsspu'
	
	import shopinfo from '@/components/shopinfo/shopinfo.vue'
	

	export default {
		
		components: {
			shopinfo
		},
		onLoad(e) {
			if (e) {
				this.id = e.id;
			}
		},
		onShow(e) {
			if (this.id) {
				this.getData();
			}
		},
		data() {
			return {
				globalData: app.globalData,
				CustomBar: this.CustomBar,
				id: null,
				orderNo: null,
				cardCur:0,
				data: {
					shopId:'',
					picUrls:[]
				},
				showModal: false,
			}
		},
		methods: {
			changeShelf(){
				let row = this.data;
			    let content = '确定要上架吗?';
			    let shelf = 1;
			    if(row.shelf==1){
			        shelf = 0;
			        content = '确定要下架吗?';
			    }
			    let that = this;
			    uni.showModal({
			        title: '提示',
			        content: content,
			        success: function(res) {
			            if (res.confirm) {
			                putObjShelf({
			                    ids: row.id,
			                    shelf: shelf
			                }).then(data => {
			                    uni.showToast({title:"操作成功"})
								that.getData();
			                })
			            } else if (res.cancel) {}
			        }
			    });
			},
			getData() {
				getObj(this.id).then(response => {
					if (response.data) {
						this.data = response.data;
					}
				});
			},
		}
	}
</script>

<style>
	.description-class >>> img{
		width:100%;
		height:auto;
	}
	

	.img-box {
		width: 200rpx !important;
		height: 200rpx !important;
	}

	.pay {
		padding: 10rpx 20rpx 10rpx 20rpx;
	}

	.button-bg {
		padding: 20rpx 40rpx 20rpx 40rpx;
	}
</style>
